<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部卡片 -->
      <page-tools :show-before="true">
        <span slot="before">本月：社保在缴 公积金在缴 增员 减员 入职 离职</span>
        <template #after>
          <el-button type="text" style="color:#555555" @click="$router.push('/historicalArchiving')">历史归档</el-button>
          <el-button type="text" style="color:#555555" @click="push">{{ time }}月报表</el-button>
        </template>
        <template #button>
          <el-row class="top">
            <span style="font-weight:700;margin-right:10px">部门:</span>
            <!-- 复选框 -->
            <!-- <div style="margin: 15px 0;" /> -->
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="city in cities" :key="city.id" :label="city.id">{{ city.introduce }}</el-checkbox>
            </el-checkbox-group>
          </el-row>
          <el-row class="juli">
            <span style="font-weight:700;margin-right:10px">社保城市:</span>
            <el-checkbox v-model="checked">北京</el-checkbox>
          </el-row>
          <el-row class="juli">
            <span style="font-weight:700;margin-right:10px">公积金城市:</span>
            <el-checkbox v-model="checked1">北京</el-checkbox>
          </el-row>
        </template>
      </page-tools>
      <!-- 列表 -->
      <el-card>
        <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
          @row-click="rowClick"
        >
          <!-- sortable是否排序 -->
          <el-table-column
            type="index"
            label="序号"
          />
          <el-table-column
            prop="username"
            label="姓名"
            sortable
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="120"
            sortable
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            sortable
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            sortable
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="150"
            sortable
          />
          <el-table-column
            prop="leaveTime"
            label="离职时间"
            width="120"
            sortable
          >
            <template #default="{row}">
              {{ row.leaveTime?leaveTime:'----' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="participatingInTheCity"
            label="社保城市"
          />
          <el-table-column
            prop="providentFundCity"
            label="公积金城市"
            width="120"
          />
          <el-table-column
            prop="socialSecurityBase"
            label="社保基数"
          />
          <el-table-column
            prop="providentFundBase"
            label="公积金基数"
            width="120"
          />
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[ 10, 20,30,50]"
            :page-size="100"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
// 获取部门列表
import { getDepartments } from '@/api/departments'
// 获取列表数据
import { getSocialList, getyearMonth } from '@/api/social'
export default {
// const cityOptions = ['上海', '北京', '广州', '深圳'];
  data() {
    return {
      checked: [],
      checked1: [],
      checkedCities: [], // 部门被选中的项
      cities: [], // 部门列表
      // isIndeterminate: true
      time: '', // 报表时间
      tableData: [], // 表格渲染数据
      currentPage: 1, // 当前页数，
      total: 0, // 总条数
      data: {
        page: 1, // 页码
        pageSize: 10, // 每页条数
        departmentChecks: []// 部门列表
      }
    }
  },
  created() {
    // 获取当前时间
    // let month = new Date().getMonth() + 1
    // const year = new Date().getFullYear()
    // month = month < 10 ? '0' + month : month
    // this.time = `${year}${month}`
    // 获取时间
    this.getyearMonth()
    // 获取部门数据
    this.getDepartments()
    // 获取列表数据
    this.getSocialList()
  },
  methods: {
    // 获取时间getyearMonth
    async getyearMonth() {
      const res = await getyearMonth()
      // console.log(res)
      this.time = res.dataMonth
    },
    // 获取所有部门
    async getDepartments() {
      const { depts } = await getDepartments()
      // 删除第一个,因为第一个为空
      // this.cities = depts.splice(1)
      this.cities = depts
      // console.log(this.cities)
    },
    // 获取所有数据
    async getSocialList() {
      const { rows, total } = await getSocialList(this.data)
      this.tableData = [...rows]
      this.total = total
      // console.log(rows)
    },
    // 点击部门复选框
    handleCheckedCitiesChange(value) {
      // 筛选渲染之前应该将分页数据清空
      this.data = {
        page: 1, // 页码
        pageSize: 10, // 每页条数
        departmentChecks: []// 部门列表
      }
      // 参数为当前被选中的值
      this.data.departmentChecks = [...value]
      console.log(this.data.departmentChecks)
      // 发请求
      this.getSocialList()
      // const checkedCount = value.length
      // this.checkAll = checkedCount === this.cities.length
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    // 条数改变时触发
    handleSizeChange(index) {
      console.log(index)
      this.data.pageSize = index
      this.getSocialList()
    },
    // 页码改变时触发   参数为当前页
    handleCurrentChange(index) {
      // console.log(index)
      this.data.page = index
      // this.currentPage = index
      this.getSocialList()
    },
    // 点击行实现路由跳转
    rowClick(row, column, event) {
      // console.log(row, column, event)
      this.$router.push(`/detail/${row.id}`)
    },
    // 点击进入报表
    push() {
      this.$router.push({ name: 'monthStatement', params: { yearMonth: this.time }})
    }
  }
}

</script>

<style lang="scss" scoped>
.mar{
  margin-left: 20px;
}
::v-deep .juli{
  margin:10px 0
}
::v-deep .top{
  margin-top:10px
}
</style>
